.search-flat-article-hit {
    display: flex;
    text-decoration: none;
    cursor: pointer;
    gap: 1rem;

    &:hover {
        .search-flat-article-hit__title {
            text-decoration: underline;
        }
    }
}

.search-flat-article-hit__content {
    display: flex;
}

.search-flat-article-hit__image-container {
    width: 84px; // Same size as the image in case the image is missing.
    margin-right: var(--grid-gap);
}

.search-flat-article-hit__image {
    width: 84px;
    height: 64px;
    object-fit: cover;
}

.search-flat-article-hit__title {
    @include h3-bold;
    color: $blue-90;
    margin: 0 0 2px 0;

    @include sm-only {
        font-size: 16px;
    }
}

.search-flat-article-hit__date {
    @include h6-black-caps;
    color: $blue-60;
    margin-bottom: 2px;
}

.search-flat-article-hit__authors-and-excerpt {
    @include body-3-medium;
    color: $blue-90;
    display: -webkit-box;
    overflow: hidden;
    // see https://github.com/owid/owid-grapher/issues/4982
    overflow-wrap: anywhere;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;

    @include sm-only {
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }
}

.search-flat-article-hit__authors {
    color: $blue-60;
}

.search-flat-article-hit__text {
    display: flex;
    flex-direction: column;
    flex: 1;
}
